{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>恒恒星球|{% block title %}{% endblock %} </title>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
    /*-------------导航栏------------*/
/* 导航条默认属性设置 */
.navbar-default {
    margin-bottom: 0px;
    /* 底部边距调整为0 */
    height: 60px;
    border: 0px;
    /* 去掉边框 */
    background-color: rgba(0, 0, 0, 0.5); 
    /* 设置导航栏背景色 */
    margin-top: 0px;
    /* 设置导航栏的上边距 */
}

/* 导航栏栏目激活时属性 */
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav .active a:focus {
    background-color: rgba(0, 0, 0, 0.5);
    /* 背景色设置为深蓝色 */
    color: #fff;
    /* 前景文字颜色设置为白色 */
}

/* 一级菜单鼠标移过时属性 */
.navbar-default .navbar-nav li a:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 一级菜单单击展开时属性 */
.navbar-default .navbar-nav li.open a.on {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 下拉菜单内边距 */
.dropdown-menu {
    padding: 0px;
}

/* 二级菜单标签属性 */
.dropdown-menu li a {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #777;
    text-align: center;
}

/* 二级菜鼠标移过时属性 */
.navbar-default .navbar-nav li ul a:hover{
	color:#fff;
	background-color:#777;;
}
/* 一级菜单激活时二级菜单鼠标移过时属性 */
.navbar-default .navbar-nav li.active ul a:hover{
	color:#fff;
	background-color:#777;;
}

/* 一级菜单宽度和文字对齐方式 */
.nav-top {
    width: 14%;
    text-align: center;
    font-size: large;
}

/* 导航栏与横幅的分割线 */
.line {
    height: 3px;
    width: 100%;
    background: #005197;
}

/*-------------页脚------------*/
.web-footer{
	width:100%;        /* 占满整个浏览器宽度 */
	margin-top:5px;   /* 设置与上边缘距离 */
}

#map-footer{
	background-color: rgba(0, 0, 0, 0); /* 背景透明 */ 
}
#map-footer dl{
	text-align:center;               /* 站点链接文字对齐 */
	margin-top:10px;                 /* 设置表格与上边缘边距 */
}
#map-footer dt{
	padding:3px;                     /* 表格标题内边距为3像素 */
	color:#fff;                      /* 表格标题颜色为白色 */
}
#map-footer dd{
	padding:3px;                     /* 表格内容内边距为3像素 */	
}

/* 二维码广告段落 */
#map-footer p{
	margin-top:20px;
	margin-bottom:10px;
	color:#fff;
	font-size:16px;
}
#map-footer a{
	color:#A6A6A6;                   /* 站点链接文字颜色设置 */
	font-size:13px;                  /* 站点链接文字大小 设置 */
}
#map-footer a:hover{
	color:#fff;
	text-decoration:none;             /* 去除站点链接鼠标移过时出现的下划线 */
}
#wx{
	text-align:center;                /* 二维码居中对齐 */
}
.qrimg{
	max-width: 170px;                 /* 二维码最大宽度为170像素 */
}

/*-------------尾部版权------------*/
#patent-footer{
	text-align:center;
	background-color: rgba(0, 0, 0, 0);
}
#patent-footer p{
	margin-top:10px;
	padding-right:80px;
	color:#8d8d8d;
	font-size:11px;
}
</style>
</head>

<body style="background-image:url('/static/img/new背景.jpg'); background-size: 100% 100%;background-attachment: fixed;">
    <!-- 导航条 -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example"
                    aria-expanded="false">
                    <span>导航栏</span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example">
                <ul class="nav navbar-nav" style="width:180%;">
                    <li class="nav-top">
                        <a href="{% url 'home' %}">首页</a>
                    </li>

                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            博客分类</a>
                        <ul class="dropdown-menu" style="width:100%;">
                            <li><a href="{% url 'productsApp:products' 'robot' %}">
                                    旅行</a></li>
                            <li><a href="{% url 'productsApp:products' 'monitor' %}">
                                    运动</a></li>
                            <li><a href="{% url 'productsApp:products' 'face' %}">
                                    美景</a></li>
                        </ul>
                    </li>
                    
                    <li class="dropdown nav-top">
                        <a href="#" class="dropdown-toggle on" data-toggle="dropdown">
                            联系星球</a>
                        <ul class="dropdown-menu" style="width:100%;">
                            <li><a href="{% url 'contactApp:contact' %}">联系我们</a></li>
                            <li><a href="{% url 'contactApp:recruit' %}">信息反馈</a></li>
                        </ul>
                    </li>
                    <li class="nav-top" id='science'>
                        <a href="{% url 'scienceApp:science' %}">数据统计</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 分割线 -->

    {% block content %}

    {% endblock %}
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 页脚 -->
    <div class="container web-footer">
        <!-- 站点地图 -->
        <div  class="row" id="map-footer">
            
            <div style="left: 400px;" class="col-md-2">
                <dl>
                    <dt>博客分类</dt>
                    <dd><a href="{% url 'productsApp:products' 'robot' %}">旅行</a></dd>
                    <dd><a href="{% url 'productsApp:products' 'monitor' %}">运动</a></dd>
                    <dd><a href="{% url 'productsApp:products' 'face' %}">美景</a></dd>
                </dl>
            </div>
            
            <div style="left: 500px;" class="col-md-2">
                <dl>
                    <dt>联系星球</dt>
                    <dd><a href="{% url 'contactApp:contact' %}">联系我们</a></dd>
                    <dd><a href="{% url 'contactApp:recruit' %}">反馈信息</a></dd>
                </dl>
            </div>
            <div style="left: 600px;" class="col-md-4" id="wx">
                <p>联系恒恒星球：<b style="font-size:20px">1785658XXXX</b></p>
            </div>
        </div>
        <!-- 版权 -->
        <div class="row" id="patent-footer">
            <p> © 2024 Python Web 大作业"恒恒星球"</p>
        </div>
    </div>

    <script>
        $(function () {
            $(".dropdown").mouseover(function () {
                $(this).addClass("open");
            });
            $(".dropdown").mouseleave(function () {
                $(this).removeClass("open");
            });
        });
    </script>
    <script type="text/JavaScript">
        $('#{{active_menu}}').addClass("active");
    </script>
    <script type="text/JavaScript">
        $('#{{sub_menu}}').addClass("active");
     </script>
</body>

</html>